<template>
    <div class='app-content'>
        <div class="index-tags">
            <div class="item" v-for="(item,index) in nav" :key="index" @click="navigate(item)">
                <img :src="item.image"/>
                <span class="text">{{item.label}}</span>
            </div>
        </div>
        <div class="app-view">
            <div class="search-area">
                <van-search
                    v-model="value"
                    left-icon=""
                    right-icon="search"
                    placeholder="请输入搜索关键词"
                    @search="onSearch"
                >
                </van-search>
                <tags 
                    v-model="tagId"
                    :data="tags"
                ></tags>
            </div>
            <div class="staff-list">
                <div class="list clearfix">
                    <div class="item" v-for="(item,index) in staffs" :key="index">
                        <div class="pic" :class="[(item.locked || !item.sign) ? 'opacity' : '']">
                            <img :src="item.image"/>
                            <div class="label">
                                <span class="locked" v-if="item.locked">以锁定</span>
                                <span class="unsign" v-else-if="!item.sign">未签到</span>
                                <span class="receive" v-else-if="item.sign && item.receive">已接待{{item.receive}}</span>
                            </div>
                        </div>
                        <div class="name">{{item.name}}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {mapGetters} from "vuex"
import Tags from "@/components/Tags/index.vue"
export default {
    name: '',
    data() { 
        return {
            value:"",
            nav:[
                {  
                    label:"登记客户",
                    image:require("@/assets/images/icon-customer.png"),
                    path:"/registration"
                },
                {  
                    label:"归属查询",
                    image:require("@/assets/images/icon-search.png"),
                    path:"/belong"
                },
                {  
                    label:"接待记录",
                    image:require("@/assets/images/icon-record.png"),
                    path:"/record/index"
                },
                {  
                    label:"扫码签到",
                    image:require("@/assets/images/icon-sign.png"),
                    path:"/sign"
                }
            ],
            tagId:"1",
            tags:[
                {
                    id:"1",
                    label:"北京销售团队"
                },
                {
                    id:"2",
                    label:"北京代理团队"
                },
                {
                    id:"3",
                    label:"北京精英团队"
                },
                {
                    id:"4",
                    label:"北京销售团队"
                },
                {
                    id:"5",
                    label:"北京代理团队"
                },
                {
                    id:"6",
                    label:"北京精英团队"
                }
            ],
            staffs:[
                {
                    image:require("@/assets/images/photo.png"),
                    name:"陈怡君",
                    sign:true,
                    receive:5
                },
                {
                    image:require("@/assets/images/photo.png"),
                    name:"陈怡君",
                    receive:10
                },
                {
                    image:require("@/assets/images/photo.png"),
                    name:"陈怡君",
                    sign:true,
                    locked:true,
                    receive:5
                },
                {
                    image:require("@/assets/images/photo.png"),
                    name:"陈怡君",
                    sign:true,
                    receive:5
                },
                {
                    image:require("@/assets/images/photo.png"),
                    name:"陈怡君",
                    receive:10
                },
                {
                    image:require("@/assets/images/photo.png"),
                    name:"陈怡君",
                    sign:true,
                    locked:true,
                    receive:5
                },
                {
                    image:require("@/assets/images/photo.png"),
                    name:"陈怡君",
                    sign:true,
                    receive:5
                },
                {
                    image:require("@/assets/images/photo.png"),
                    name:"陈怡君",
                    receive:10
                },
                {
                    image:require("@/assets/images/photo.png"),
                    name:"陈怡君",
                    sign:true,
                    locked:true,
                    receive:5
                },
                {
                    image:require("@/assets/images/photo.png"),
                    name:"陈怡君",
                    sign:true,
                    receive:5
                },
                {
                    image:require("@/assets/images/photo.png"),
                    name:"陈怡君",
                    receive:10
                },
                {
                    image:require("@/assets/images/photo.png"),
                    name:"陈怡君",
                    sign:true,
                    locked:true,
                    receive:5
                },
                {
                    image:require("@/assets/images/photo.png"),
                    name:"陈怡君",
                    sign:true,
                    receive:5
                },
                {
                    image:require("@/assets/images/photo.png"),
                    name:"陈怡君",
                    receive:10
                },
                {
                    image:require("@/assets/images/photo.png"),
                    name:"陈怡君",
                    sign:true,
                    locked:true,
                    receive:5
                },
                {
                    image:require("@/assets/images/photo.png"),
                    name:"陈怡君",
                    sign:true,
                    receive:5
                },
                {
                    image:require("@/assets/images/photo.png"),
                    name:"陈怡君",
                    receive:10
                },
                {
                    image:require("@/assets/images/photo.png"),
                    name:"陈怡君",
                    sign:true,
                    locked:true,
                    receive:5
                }
            ]
        }
    },
    computed:{
        ...mapGetters(['themeClass','currentProject'])
    },
    watch:{
        currentProject:{
            handler(newVal){
                if(newVal){
                    // 监听当前项目变化，触发相关操作
                }
            },
            immediate:true
        }
    },
    props: {

    },
    components:{
        Tags
    },
    mounted() {
        this.$Api.post({
            url:"/homePagePicture/queryProjectInforZaiXianByCity", // 请求接口
            data:{
                //请求数据,具体格式以实际业务为准
                model: JSON.stringify({"pagingmodel":{"pageSize":10,"offset":1},"systemName":"zaiXianFamily","cityId":""})
            },
            options:{
                // loading:true,发起请求时会出现加载中效果，去掉或置为false,则不出现
                loading:true
            }
        }).then((res)=>{
            //请求成功
            this.$toast("请求成功")
            console.log(res)
        }).catch((error)=>{
            //请求失败或特殊状态
            console.log(error)
        })
    },
    methods:{
        onSearch(){

        },
        navigate(item){
            this.$router.push({
                path:item.path
            })
        }
    },
}
</script>

<style lang='scss' scoped>
.app-content{
    flex:1;
    overflow: hidden;
    display:flex;
    flex-direction: column;
    .app-view{
        flex:1;
        overflow: hidden;
        margin-bottom:0.5rem;
        display:flex;
        flex-direction: column;
    }
}
.index-tags{
    display:flex;
    align-items: center;
    justify-content: space-between;
    padding:0 1.6rem;
    margin:0.6rem 0 0.5rem 0;
    .item{
        display:flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        img{
            display:block;
            width:1.14rem;
            height:1.14rem;
        }
        .text{
            display:block;
            line-height: 1;
            font-size:0.34rem;
            margin-top:0.2rem;
        }
    }
}
.search-area{
    display:flex;
    align-items: center;
    padding:0.3rem 0.4rem;
    .van-search{
        width:4.4rem;
        margin-right:0.8rem;
        padding:0;
        box-sizing: content-box;
        .van-search__content{
            height:0.8rem;
            /deep/.van-cell__value{
                line-height: normal;
                display:flex;
                flex-direction: column;
                justify-content: center;
                font-size:0.3rem;
            }
        }
    }
    .c-tags{
        flex:1;
    }
}
.staff-list{
    flex:1;
    padding-bottom:0.3rem;
    box-sizing: border-box;
    overflow: hidden;
    .list{
        height:100%;
        padding:0 0.4rem;
        box-sizing: border-box;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        .item{
            float:left;
            width:25%;
            overflow:hidden;
            display:flex;
            flex-direction: column;
            align-items: center;
            padding:0.3rem 0;
            .pic{
                border-radius: 100%;
                border:3px solid #fff;
                box-shadow: 0px 0px 0.2rem 0px rgba(0, 0, 0, 0.15);
                width:2.4rem;
                height:2.4rem;
                position:relative;
                img{
                    display:block;
                    width:100%;
                    height:100%;
                    border-radius: 100%;
                    object-fit: cover;
                }
                .label{
                    position:absolute;
                    left:50%;
                    bottom:0.3rem;
                    span{
                        display:block;
                        font-size:0.28rem;
                        line-height:0.42rem;
                        padding:0 5px;
                        white-space: nowrap;
                        border-radius: 3px;
                    }
                }
            }
            .opacity{
                box-shadow: none;
                img{
                    opacity:0.5;
                }
            }
            .name{
                font-size:0.34rem;
                margin-top:0.2rem;
            }
        }
    }
}
</style>